"circle_star"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="world">
<div id="nebula">
<div class="layer">
<div class="arm">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="arm">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#nebula,.layer{transform-style:preserve-3d}
#world{width:1300px;height:600px;background:#111112;background-image:linear-gradient(rgba(40,10,60,1) 0,rgba(40,10,60,1) 10%,rgba(0,0,0,0) 100%);margin:0 auto;position:relative;perspective:1100px}
#nebula,.arm,.star,.star:after{position:absolute}
#nebula{top:50%;left:50%;animation:rotateNebula 10s linear infinite}
.star{width:30px;height:60px;border-radius:50%;border-right:dashed #fff 2px;animation:starBlink 6s infinite}
.star:after,.star:before{content:"";display:block;border-radius:50%;filter:blur(3px)}
.star:before{width:12px;height:12px;background-image:radial-gradient(ellipse at center,rgba(250,250,250,1) 0,rgba(250,250,250,1) 10%,rgba(0,0,0,0) 100%)}
.star:after{top:20px;width:18px;height:18px;background-image:radial-gradient(ellipse at center,rgba(255,160,180,.2) ,rgba(255,160,180,.2) 10%,rgba(0,0,0,0) 100%)}
@keyframes rotateNebula{
0%{transform:rotateX(-120deg) rotateZ(0)}
100%{transform:rotateX(-120deg) rotateZ(-360deg)}
}
@keyframes starBlink{
0%,50%{opacity:0}
40%,44%{opacity:1}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* */
$(document).ready(function(){
var amp = 100;
var per = (Math.PI*2)/40; //period is 40
var layers = document.querySelectorAll(".layer");
for (var k =0; k<layers.length; k++){
layers[k].style.transform = " translateZ("+k*10+"px) rotate("+Math.random()*40+"deg)";
var arms = layers[k].querySelectorAll(".arm");
for (var i =0; i<arms.length; i++){
arms[i].style.transform = " rotate("+i*(360/arms.length)+"deg)";
var stars = arms[i].querySelectorAll(".star");
for (var j =0; j<stars.length; j++){
star = stars[j];
t = j;
var xPos = amp*Math.cos(per*t);
var yPos = -amp*Math.sin(per*t) + amp;
star.style.transform = "translateX("+xPos+"px) translateY("+yPos+"px) rotate(30deg)";
star.style.animationDelay = Math.random()*-5+"s" ;
}
}
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro React

Questions / Comments: